import React, { useState } from "react";
import { Carousel, Card, Row, Col, Rate, Button, Badge } from "antd";
import { ShoppingCartOutlined, FireOutlined, RightOutlined } from "@ant-design/icons";

// 
interface HomePageProps {
  isMobile: boolean;
  addToCart: (product: any) => void;
  setSelectedProduct: (product: any) => void;
}

// 首页组件
export default function HomePage({ isMobile, addToCart, setSelectedProduct }: HomePageProps) {
  const carouselHeight = isMobile ? 140 : 180;
  const [hoveredCategory, setHoveredCategory] = useState<number | null>(null);
  
  // 轮播图数据
  const banners = [
    { id: 1, image: "banner1.jpg" },
    { id: 2, image: "banner2.jpg" },
    { id: 3, image: "banner3.jpg" }
  ];
  // 热门商品数据
  const hotProducts = [
    {
      id: 1,
      name: "iPhone 15 Pro",
      price: 7999,
      originalPrice: 8999,
      rating: 4.8,
      sales: 1234,
      discount: "限时优惠",
      tags: ["新品", "热卖"],
      color: "#f0f7ff",
      image: "1.png" 
    },
    {
      id: 2,
      name: "MacBook Air M2",
      price: 8999,
      originalPrice: 9999,
      rating: 4.9,
      sales: 856,
      discount: "新品上市",
      tags: ["新品", "旗舰"],
      color: "#f0fff4",
      image: "2.png" //
    },
    {
      id: 3,
      name: "XIAOMI 15 Ultra",
      price: 5979,
      originalPrice: 6999,
      rating: 4.7,
      sales: 2341,
      discount: "热销爆款",
      tags: ["热卖", "性价比"],
      color: "#fff7e6",
      image: "3.png" // 
    },
    {
      id: 4,
      name: "iPad Pro 11寸",
      price: 6799,
      originalPrice: 7599,
      rating: 4.8,
      sales: 567,
      discount: "限时特惠",
      tags: ["大屏", "轻薄"],
      color: "#f9f0ff",
      image: "4.png" //
    },
    {
      id: 5,
      name: "Apple Watch S8",
      price: 3299,
      originalPrice: 3599,
      rating: 4.6,
      sales: 892,
      discount: "健康优选",
      tags: ["健康", "运动"],
      color: "#fff0f6",
      image: "5.png" //
    },
    {
      id: 6,
      name: "OPPO X8 find",
      price: 5199,
      originalPrice: +999,
      rating: 4.9,
      sales: 432,
      discount: "专业摄影",
      tags: ["专业", "高画质"],
      color: "#f6ffed",
      image: "6.png" // 
    },
    {
      id: 7,
      name: "HUAWEIPura70 Pro",
      price: 5699,
      originalPrice: 6999,
      rating: 4.8,
      sales: 1567,
      discount: "闪拍快充",
      tags: ["快充", "闪拍"],
      color: "#e6f7ff",
      image: "7.png" // 
    },
    {
      id: 8,
      name: "HUAWEl Pura X",
      price: 8699,
      originalPrice: 9999,
      rating: 4.7,
      sales: 678,
      discount: "大屏折叠",
      tags: ["鸿蒙", "长续航"],
      color: "#f9f0ff",
      image: "8.png" // 
    }
  ];

  // 商品分类数据
  const categories = [
    { id: 1, name: "手机数码", icon: "📱", color: "#1890ff", count: 128 },
    { id: 2, name: "电脑办公", icon: "💻", color: "#52c41a", count: 96 },
    { id: 3, name: "家用电器", icon: "🏠", color: "#faad14", count: 87 },
    { id: 4, name: "服饰内衣", icon: "👕", color: "#f5222d", count: 156 },
    { id: 5, name: "运动户外", icon: "⚽", color: "#13c2c2", count: 72 },
    { id: 6, name: "汽车用品", icon: "🚗", color: "#722ed1", count: 63 },
    { id: 7, name: "母婴用品", icon: "🍼", color: "#eb2f96", count: 115 },
    { id: 8, name: "食品饮料", icon: "🍎", color: "#fa8c16", count: 189 }
  ];

  // 推荐品牌
  const brands = [
    { id: 1, name: "Apple", icon: "🍎" },
    { id: 2, name: "华为", icon: "🌺" },
    { id: 3, name: "小米", icon: "⚡" },
    { id: 4, name: "三星", icon: "⭐" },
    { id: 5, name: "索尼", icon: "🎮" },
    { id: 6, name: "耐克", icon: "👟" }
  ];

  return (
    <div style={{ padding: "12px 0" }}>
    {/* 轮播图区域  */}
    <div style={{ marginBottom: 16 }}>
      {/* 轮播图自动播放 */}
      <Carousel autoplay>
        {banners.map((banner) => (
          <div key={banner.id}>
            <img 
              src={banner.image}
              alt={`轮播图 ${banner.id}`}
              style={{
                width: '100%',
                height: carouselHeight,
                //图片覆盖容器
                objectFit: 'cover',
                borderRadius: 8
              }}
            />
          </div>
        ))}
      </Carousel>
    </div>

      {/* 推荐品牌 */}
      <div style={{ marginBottom: 24, background: "#fff", borderRadius: 8, padding: "12px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: 16, fontWeight: 500, display: "flex", alignItems: "center" }}>
            <FireOutlined style={{ color: "#ff4d4f", marginRight: 6 }} />
            热门品牌
          </h3>
          <Button type="link" size="small" style={{ padding: 0, fontSize: 13, display: "flex", alignItems: "center" }}>
            全部品牌 <RightOutlined style={{ fontSize: 10, marginLeft: 4 }} />
          </Button>
        </div>
        <Row gutter={[12, 12]}>
          {brands.map((brand) => (
            <Col span={4} key={brand.id}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  padding: "8px 0",
                  background: "#f9f9f9",
                  borderRadius: 6,
                  cursor: "pointer",
                  transition: "all 0.3s"
                }}
              >
                <div style={{ fontSize: isMobile ? 24 : 28, marginBottom: 4 }}>{brand.icon}</div>
                <span style={{ fontSize: isMobile ? 11 : 12 }}>{brand.name}</span>
              </div>
            </Col>
          ))}
        </Row>
      </div>

      {/* 商品分类 */}
      <div style={{ marginBottom: 24, background: "#fff", borderRadius: 8, padding: "16px 12px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
          <h3 style={{ margin: 0, fontSize: 16, fontWeight: 500 }}>商品分类</h3>
          <Button type="link" size="small" style={{ padding: 0, fontSize: 13, display: "flex", alignItems: "center" }}>
            全部类目 <RightOutlined style={{ fontSize: 10, marginLeft: 4 }} />
          </Button>
        </div>
        <Row gutter={[12, 16]}>
          {categories.map((category) => (
            <Col span={6} key={category.id}>
              <div
                onMouseEnter={() => setHoveredCategory(category.id)}
                onMouseLeave={() => setHoveredCategory(null)}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  padding: "12px 0",
                  background: hoveredCategory === category.id ? "#f0f9ff" : "#fff",
                  borderRadius: 8,
                  cursor: "pointer",
                  transition: "all 0.3s",
                  border: `1px solid ${hoveredCategory === category.id ? category.color : "#f0f0f0"}`,
                  boxShadow: hoveredCategory === category.id ? `0 4px 12px ${category.color}33` : "none",
                  transform: hoveredCategory === category.id ? "translateY(-4px)" : "none"
                }}
              >
                <div 
                  style={{ 
                    fontSize: isMobile ? 24 : 28, 
                    marginBottom: 8,
                    width: 40,
                    height: 40,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    borderRadius: "50%",
                    background: `${category.color}11`,
                    color: category.color
                  }}
                >
                  {category.icon}
                </div>
                <span style={{ fontSize: isMobile ? 12 : 13, fontWeight: 500, marginBottom: 4 }}>{category.name}</span>
                <span style={{ fontSize: isMobile ? 10 : 11, color: "#999" }}>{category.count}件商品</span>
              </div>
            </Col>
          ))}
        </Row>
      </div>

      {/* 热门商品 */}
      <div style={{ background: "#fff", borderRadius: 8, padding: "16px 12px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
          <div style={{ display: "flex", alignItems: "center" }}>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 500, display: "flex", alignItems: "center" }}>
              <FireOutlined style={{ color: "#ff4d4f", marginRight: 6 }} />
              热门商品
            </h3>
            <Badge count="HOT" style={{ 
              backgroundColor: '#ff4d4f', 
              marginLeft: 8,
              fontSize: isMobile ? 10 : 11,
              padding: "0 4px",
              borderRadius: 4
            }} />
          </div>
          <Button type="link" size="small" style={{ padding: 0, fontSize: 13, display: "flex", alignItems: "center" }}>
            查看更多 <RightOutlined style={{ fontSize: 10, marginLeft: 4 }} />
          </Button>
        </div>
        <Row gutter={[12, 16]}>
          {hotProducts.map((product) => (
            <Col span={isMobile ? 12 : 6} key={product.id}>
              <Card
                hoverable
                onClick={() => setSelectedProduct(product)} //
                style={{ 
                  borderRadius: 8,
                  overflow: "hidden",
                  border: "1px solid #f0f0f0",
                  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.04)",
                  cursor: "pointer" // 添加指针样式
                }}
                bodyStyle={{ padding: isMobile ? 12 : 16 }}
                cover={
                  <div
                    style={{
                      height: isMobile ? 140 : 180,
                      position: "relative",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      background: product.color,
                      overflow: "hidden"
                    }}
                  >
                  
                    <img
                      src={`/images/${product.image}`} 
                      alt={product.name}
                      style={{
                        width: "100%",
                        height: "100%",
                        objectFit: "contain",
                        padding: "10px" 
                      }}
                    />
                    <div style={{
                      position: "absolute",
                      top: 8,
                      right: 8,
                      background: "#ff4d4f",
                      color: "#fff",
                      padding: "2px 8px",
                      borderRadius: 10,
                      fontSize: isMobile ? 10 : 11
                    }}>
                      {product.discount}
                    </div>
                  </div>
                }
              >
                <div style={{ 
                  fontSize: isMobile ? 13 : 14, 
                  fontWeight: 500, 
                  marginBottom: 8,
                  height: isMobile ? 36 : 40,
                  overflow: "hidden",
                  display: "-webkit-box",
                  WebkitLineClamp: 2,
                  WebkitBoxOrient: "vertical"
                }}>
                  {product.name}
                </div>
                
                {/* 商品标签 */}
                <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 8 }}>
                  {product.tags.map((tag: string, index: number) => (
                    <span 
                      key={index} 
                      style={{
                        padding: "2px 6px",
                        background: "#f0f5ff",
                        color: "#1890ff",
                        borderRadius: 4,
                        fontSize: isMobile ? 10 : 11
                      }}
                    >
                      {tag}
                    </span>
                  ))}
                </div>
                
                <div>
                  <div style={{ display: "flex", alignItems: "center", marginBottom: 8 }}>
                    <Rate
                      disabled
                      defaultValue={5}
                      value={product.rating}
                      allowHalf
                      style={{ fontSize: isMobile ? 12 : 14, marginRight: 8 }}
                    />
                    <span style={{ fontSize: isMobile ? 12 : 13, color: "#ff4d4f", fontWeight: 500 }}>{product.rating}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div>
                      <span style={{ fontSize: isMobile ? 15 : 16, color: "#ff4d4f", fontWeight: "bold" }}>
                        ¥{product.price}
                      </span>
                      <span
                        style={{
                          fontSize: isMobile ? 11 : 12,
                          color: "#999",
                          textDecoration: "line-through",
                          marginLeft: 6
                        }}
                      >
                        ¥{product.originalPrice}
                      </span>
                    </div>
                    <Button
                    type="primary"
                    size="small"
                    icon={<ShoppingCartOutlined style={{ fontSize: isMobile ? 12 : 14 }} />}
                    style={{ 
                        background: "#1890ff", 
                        borderColor: "#1890ff",
                        fontWeight: 500
                    }}
                    onClick={(e) => {
                        e.stopPropagation();
                        addToCart(product);
                    }}
                    >
                    {isMobile ? "加购" : "加入购物车"}
                    </Button>
                  </div>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
}